import React, { Component } from "react";
import './VideoList.css';
import axios from 'axios';

export default class VideoList extends Component {
    state = {
        douyins: []
    }
    render() {
        return (
            <div className="douyin-container container">
                <h2>热门视频</h2>
                <hr />
                <div className="douyin-list row">
                    {
                        this.state.douyins.map(item => {
                            return <div key={item.id} className="col-xs-3">
                                        <div className="img">
                                            <img width="100%" src={'http://cdn.xiaohigh.com' + item.cover_local} alt="" />
                                        </div>
                                        <h5 >{item.desc}</h5>
                                    </div>
                        })
                    }
                    
                </div>
            </div>
        );
    }

    async componentDidMount(){
        let result = await axios('http://api.xiaohigh.com/douyin');
        //设置状态
        this.setState({
            douyins: result.data
        })
    }

}
